<!DOCTYPE html>
<html>
	<head>
		</script>
		<style lang="scss">
			.like {
				cursor: pointer;
				font-size: 25px;
				display: inline-block;
			}
		</style>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.min.css" />
		<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.min.js"></script>
	</head>
	<body>
		<div id="app">
			<template id="moon">
				<div>
					<el-divider content-position="left">月度数据</el-divider>
					<el-row :gutter="20">
						<el-col :span="6">
							<div>
								<el-statistic group-separator="," :precision="2" :value="value2" :title="title"></el-statistic>
							</div>
						</el-col>
						<el-col :span="6">
							<div>
								<el-statistic title="线上线下顾客比">
									<template slot="formatter"> 3056/1645 </template>
								</el-statistic>
							</div>
						</el-col>
						<el-col :span="6">
							<div>
								<el-statistic group-separator="," :precision="2" decimal-separator="." :value="value1" :title="title">
									<template slot="prefix">
										<i class="el-icon-s-flag" style="color: red"></i>
									</template>
									<template slot="suffix">
										<i class="el-icon-s-flag" style="color: blue"></i>
									</template>
								</el-statistic>
							</div>
						</el-col>
						<el-col :span="6">
							<div>
								<el-statistic :value="like ? 521 : 520" title="评论反馈">
									<template slot="suffix">
              <span @click="like = !like" class="like">
                <i class="el-icon-star-on" style="color:red" v-show="!!like"></i>
                <i class="el-icon-star-off" v-show="!like"></i>
              </span>
									</template>
								</el-statistic>
							</div>
						</el-col>
					</el-row>
				</div>
			</template>
			<el-divider content-position="left">季度数据</el-divider>
			<template id="quarter">
				<div>
					<el-row :gutter="20">
						<el-col :span="6">
							<div>
								<el-statistic group-separator="," :precision="2" :value="value2" :title="title"></el-statistic>
							</div>
						</el-col>
						<el-col :span="6">
							<div>
								<el-statistic title="线上线下顾客比">
									<template slot="formatter"> 3056/1645 </template>
								</el-statistic>
							</div>
						</el-col>
						<el-col :span="6">
							<div>
								<el-statistic group-separator="," :precision="2" decimal-separator="." :value="value1" :title="title">
									<template slot="prefix">
										<i class="el-icon-s-flag" style="color: red"></i>
									</template>
									<template slot="suffix">
										<i class="el-icon-s-flag" style="color: blue"></i>
									</template>
								</el-statistic>
							</div>
						</el-col>
						<el-col :span="6">
							<div>
								<el-statistic :value="like ? 521 : 520" title="评论反馈">
									<template slot="suffix">
              <span @click="like = !like" class="like">
                <i class="el-icon-star-on" style="color:red" v-show="!!like"></i>
                <i class="el-icon-star-off" v-show="!like"></i>
              </span>
									</template>
								</el-statistic>
							</div>
						</el-col>
					</el-row>
				</div>
			</template>
			<el-divider content-position="left">年度数据</el-divider>
			<template id="year">
				<div>
					<el-row :gutter="20">
						<el-col :span="6">
							<div>
								<el-statistic group-separator="," :precision="2" :value="value2" :title="title"></el-statistic>
							</div>
						</el-col>
						<el-col :span="6">
							<div>
								<el-statistic title="线上线下顾客比">
									<template slot="formatter"> 3056/1645 </template>
								</el-statistic>
							</div>
						</el-col>
						<el-col :span="6">
							<div>
								<el-statistic group-separator="," :precision="2" decimal-separator="." :value="value1" :title="title">
									<template slot="prefix">
										<i class="el-icon-s-flag" style="color: red"></i>
									</template>
									<template slot="suffix">
										<i class="el-icon-s-flag" style="color: blue"></i>
									</template>
								</el-statistic>
							</div>
						</el-col>
						<el-col :span="6">
							<div>
								<el-statistic :value="like ? 521 : 520" title="评论反馈">
									<template slot="suffix">
              <span @click="like = !like" class="like">
                <i class="el-icon-star-on" style="color:red" v-show="!!like"></i>
                <i class="el-icon-star-off" v-show="!like"></i>
              </span>
									</template>
								</el-statistic>
							</div>
						</el-col>
					</el-row>
				</div>
			</template>

		</div>
		<script>
			var app = new Vue({
				el: "#app",
				data: {
					like: true,
					value1: 4154.564,
					value2: 2222,
					title: '本月增长',
				},
				methods: {
					//
				}
			});
		</script>
	</body>
</html>
